<template>
  <div class="article" v-if="article">
    <div class="head-box">
      <h2 class="head-title">
        {{article.title}}
      </h2>
      <div class="head-intro">
        <avatr :user="article.author"></avatr>
        <div class="head-middle">
          <div class="head-middle-top">
            <type-block :item="article" v-if="article"></type-block>
            <span class="head-author-name">{{article.author.loginname}}</span>
          </div>
          <div class="head-middle-bottom">
            {{article.createTime}} ·
            <span>{{article.visit_count}}</span>
            <div class="icon-eye-open"></div>
          </div>
        </div>
        <div class="head-right">
          <!--<icon :type="heart" :size="32"></icon>-->
        </div>
      </div>
      <div class="content-box">
        <wxParse v-if="article" :content="article.content"></wxParse>
      </div>
      <div class="comment-box">
        <div class="comment-count">
          {{article.reply_count}}&nbsp;条回复
        </div>
        <div class="comment-item" v-for="(reply, index) in article.replies" :key="index">
          <div class="comment-head">
            <avatar :user="reply.author"></avatar>
            <div class="comment-middle">
              <div class="comment-middle-top">
                {{reply.author.loginname}}
              </div>
              <div class="comment-middle-bottom">
                <span>{{index+1}}</span> 楼 · {{reply.createTime}}
              </div>
            </div>
            <div class="comment-right"></div>
          </div>
          <div class="comment-content">
            <wxParse :content="reply.content"></wxParse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import typeBlock from '../../components/type-block'
  import avatar from '../../components/avatar'
  import {topicId} from '../../utils/fly'
  import {formatTime} from '../../utils'
  import wxParse from 'mpvue-wxparse'

  export default {
    name: 'article',
    data() {
      return {
        article: null,
        test: '<span>sss</span>'
      }
    },
    components: {
      avatar,
      typeBlock,
      wxParse
    },
    async onLoad() {
      const {id} = this.$root.$mp.query
      this.article = null
      wx.showLoading({
        title: '加载中'
      })
      topicId('', id).then(res => {
        if (res.success) {
          this.article = res.data
          this.article = Object.assign(this.article, {
            createTime: formatTime(new Date(res.data.create_at))
          })
          if (this.article.replies && this.article.replies.length) {
            this.article.replies = this.article.replies.map(reply => {
              reply.createTime = formatTime(new Date(reply.create_at))
              return reply
            })
          }
          wx.hideLoading()
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .article{
    background-color: $page-bg;
    font-size: 14px;
    .head-box{
      padding: 14px;
      background-color: $base-bg;
      .head-title{
        font-size: 18px;
        margin: 0;
      }
      .head-intro {
        display: flex;
        margin-top: 8px;
        align-items: center;
        .head-middle{
          flex: 1;
          margin-left: 10px;
          .head-middle-top{
            display: flex;
            align-items: center;
            .head-author-name{
              font-size: 14px;
              margin-left: 8px;
            }
          }
          .head-middle-bottom{
            line-height: 20px;
            font-size: 13px;
            color: $content-font-time;
            margin-top: 2px;
          }
        }
        .head-right{
          width: 36px;
          flex-shrink: 0;
          text-align: center;
          font-size: 16px;
        }
      }
    }
    .content-box{
      padding: 0 14px;
      background: $base-bg;
      box-shadow: 0 2px 2px #cecece;
    }
    .comment-box{
      margin-top: 8px;
      background: $base-bg;
      .comment-count{
        position: relative;
        padding: 18px 14px;
        font-size: 14px;
        font-weight: 100;
        border-bottom: 1px solid $grey-border;
      }
      .comment-item{
        position: relative;
        padding: 14px;
        border-bottom: 1px solid $grey-border;
        .comment-head{
          display: flex;
          .comment-middle{
            margin-left: 8px;
            flex: 1;
            .comment-middle-top {}
            .comment-middle-bottom{
              span{
                color: $light-color;
              }
            }
          }
          .comment-right{
            flex-shrink: 0;
            text-align: center;
            display: flex;
            align-items: center;
            color: $content-font-time;
          }
        }
        .comment-content{
          margin-top: 8px;
        }
      }
    }
  }
</style>
